<template>
  <div class="ele-page-container">
    <div class="ele-page-container-header">
      <div class="ele-page-container-header-heading">
        <div class="ele-page-container-header-heading-left">
            <span class="ele-page-container-header-heading-back" @click="back" v-if="back">
                <i class="el-icon-back" />
                <span class="ele-page-container-header-heading-back">返回</span>
            </span> 
            <el-divider v-if="back" direction="vertical"></el-divider>
            <span class="ele-page-container-header-heading-title">{{title}}</span>
        </div>
        <span class="ele-page-container-header-heading-extra">
          <slot name="extra"></slot>
        </span>
      </div>
    </div>
    <div class="ele-page-container-content">
      <slot name="content"></slot>
    </div>
    <div v-if="slots.submit" class="ele-page-container-footer">
      <div class="ele-page-container-footer-submit">
          <slot name="submit"></slot>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElDivider } from "element-plus"
import { defineProps, useContext } from '@vue/runtime-core'
import EleLayoutBreadcrumb from '../Layout/LayoutBreadcrumb.vue'
import { useRoute, useRouter } from "vue-router"

const { slots } = useContext()
const router = useRouter();

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  back: {
    type: Boolean,
    default: true
  }
})

const back = function() {
  router.go(-1)
}

</script>
<style>
.ele-page-container {
  position: relative;
}
.ele-page-container-header {
  padding: 10px;
  background-color: white;
}
.ele-page-container-header-heading {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.ele-page-container-header-heading-title {
  font-size: 14px;
  color: #515a6e;
}
.ele-page-container-header-heading-back i{
  font-size: 16px;
  margin-right: 6px;
}
.ele-page-container-header-heading-back span{
  font-size:14px;
  color: #515a6e;
}
.ele-page-container-header-heading .el-divider--vertical {
  margin-left: 14px;
  margin-right: 14px;
}
.ele-page-container-header-heading-left {
  display: flex;
  align-items: center;
  margin: 4px 0;
  overflow: hidden;
}
.ele-page-container-content {
  background-color: var(--c-page-background);
  min-height: 100px;
  padding: 10px;
}
.ele-page-container-footer {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: white;
  border-top: 1px solid whitesmoke;
  position: relative;
  bottom: 0px;
}
.ele-page-container-footer-submit {
  float:right
}
</style>